<template>
  <div class="formComponent">
    <!-- 基础组件 -->
    <!-- rules -->
    <el-form-item v-if="formItem.Type == 'button'" :label="formItem.Name">
      <el-button></el-button>
    </el-form-item>
    <el-form-item v-if="formItem.Type == 'textArea'" :label="formItem.Name">
      <el-input :rows="5" type="textarea" placeholder="Please input" />
    </el-form-item>
    <el-form-item v-if="formItem.Type == 'Input'" :label="formItem.Name">
      <el-input
        :placeholder="
          formItem.OccupancyTip != null ? formItem.OccupancyTip : '请输入'
        "
        :value="formItem.DefaultValue ? formItem.DefaultValue : ''"
        :maxlength="formItem.MaxInput"
        :clearable="formItem.IsClear == 0 ? false : true"
        :readonly="formItem.IsRead == 0 ? false : true"
        :disabled="
          formItem.IsActive != null
            ? formItem.IsActive == 0
              ? false
              : true
            : false
        "
      >
        <template v-if="formItem.Prefix" #prepend>
          {{ formItem.Prefix }}
        </template>
        <template v-if="formItem.Suffix" #append>
          {{ formItem.Suffix }}
        </template>
      </el-input>
    </el-form-item>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive } from 'vue';
import mitt from '@/utils/bus';
import { capitalizeKeys } from '@/utils/util';
let bus: any = mitt;

//formRightCompPropInfo
const props = defineProps({
  formComponent: { default: '', type: Object },
});
const data = reactive<any>({
  compPropData: {
    FormId: '',
    Index: 0,
    //数据库表
    DataTable: '',
    Id: '',
    //控件类型
    ControlType: '',
    //控件字段
    ControlFieId: '',
    //控件标题
    ControlTitle: '',
    //标题提示
    TitleTip: '',
    //占位提示
    OccupancyTip: '',
    //默认值
    DefaultValue: '',
    //数据选项
    DataType: '',
    //静态的数据(json)
    StaticValue: '',
    //数据id 数据字典id/远端数据id
    DataId: '',
    //存储字段
    SaveFieId: '',
    //显示字段
    DisplayName: '',
    //能否清空
    IsClear: 0,
    //是否必填
    IsRequired: 0,
    //是否密码展示
    IsPwd: 0,
    //是否只读
    IsRead: 0,
    //是否隐藏
    IsHide: 0,
    //前缀
    Prefix: '',
    //后缀
    Suffix: '',
    //前图标
    PreIcon: '',
    //后图标
    SufIcon: '',
    //是否唯一
    IsUnique: 0,
    //最多输入
    MaxInput: '',
    IsActive: 0,
  },
  currentFormItemId: '',
});
bus.on('formRightCompPropInfo', (currentData: any) => {
  if (currentData.FormItemId == data.currentFormItemId) {
    formItem = currentData;
  }
});
let formItem: any = computed(() => {
  data.currentFormItemId = props.formComponent.formItemId;
  let info = capitalizeKeys(props.formComponent);
  return info;
});
</script>
